<template>
    <div class="change-name">
        <pub-top isBorder="true" title="修改昵称"></pub-top>

        <div class="mt2 flex">
            <input type="text" class="flex1" placeholder="请填写昵称" v-model="name" />
        </div>

        <div class="change" @click="change">保存</div>

    </div>
</template>
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import pubTop from '@/components/top';
import { Toast } from 'vant';
export default {
    data(){
        return {
            name: null,
        }
    },
    created(){
    },
    computed: {
        ...mapState(['user'])
    },
    components: {
        pubTop,
    },
    methods: {
        change(){
            const that = this;
            if(!this.name){
                Toast({
                    duration: 1600,
                    message: '请填写昵称'
                });
                return
            }
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Mine&a=setting', {
                params: {
                    uid: this.$store.state.user.uid,
                    type: 1,
                    val: this.name

                }
            }).then(res => {
                if(res.data.code == 200){
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                    // 存取localStorage的user
                    let userInfo = JSON.parse(sessionStorage.getItem('user'));
                    userInfo.nickname=this.name;
                    sessionStorage.setItem('user', JSON.stringify(userInfo));
                    setTimeout(function(){
                        that.$router.go(-1)
                    }, 2000)
                }else {
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.change-name {
    min-height: 100vh;
    background-color: #f0f0f0;
    .mt2{
        width: 100%;
        height: 0.95rem;
        padding: 0 0.3rem;
        font-size: 0.3rem;
        line-height: 0.95rem;
        color: #333;
        background-color: #fff;
    }
    .change {
        width: 6.95rem;
        height: 0.88rem;
        margin: 0.9rem auto 0;
        border-radius: 0.1rem;
        font-size: 0.34rem;
        line-height: 0.88rem;
        text-align: center;
        color: #fff;
        background-color: #1f78ff;
        cursor: pointer;
    }
}
</style>
